<template>
	<div class="config flex items-center px-[19px] py-[18px] justify-between">
		<div class="flex items-center">
			<img :src="kfInfo.headUrl" alt="" class="mr-[11px] w-[40px] h-[40px] rounded-[50%]" />
			<span class="text-[14px] font-weight">{{ kfInfo.name }}</span>
		</div>
		<div class="el-icon-setting cursor-pointer" @click="showDialog"></div>
		<l-dialog v-model="show" title="设置" width="458px" @formSubmit="handleSubmit" @formClose="handleClose" @close="handleClose">
			<el-form ref="form" :model="form" :rules="formRules" label-width="120px">
				<el-form-item label="客服头像:" prop="headUrl">
					<l-upload-image ref="image" v-model="form.headUrl" :limit="1" height="100px" width="100px">
						<div class="flex flex-col justify-center items-center">
							<svg-icon icon-class="add" size="16px" color="#CCCCCC"></svg-icon>
							<el-tooltip effect="dark" placement="top" popper-class="tips">
								<div slot="content">LOGO推荐尺寸<br />53*53</div>
								<div class="text-[12px] text-[#cccccc] cursor-pointer mt-[19px]">上传图片<svg-icon icon-class="wenhao" color="#CCCCCC" size="12px"></svg-icon></div>
							</el-tooltip>
						</div>
					</l-upload-image>
				</el-form-item>
				<el-form-item label="客服昵称:" prop="name">
					<el-input v-model.trim="form.name" class="!w-full" placeholder="请输入昵称"></el-input>
				</el-form-item>
				<el-form-item label="自动回复:" prop="content">
					<el-input v-model="form.content" class="!w-full" placeholder="请输入自动回复内容" type="textarea" :rows="4" show-word-limit maxlength="100"></el-input>
				</el-form-item>
				<el-form-item label="自动回复时间:" prop="autoStartTime">
					<el-time-picker
						v-model="time"
						is-range
						class="!w-full"
						value-format="HH:mm:ss"
						format="HH:mm:ss"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						@change="handleTimeChange"
					>
					</el-time-picker
				></el-form-item>
			</el-form>
		</l-dialog>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	name: 'Config',
	data() {
		return {
			show: false,
			form: {
				headUrl: null,
				name: null,
				content: null,
				autoStartTime: '',
				autoEndTime: '',
				id: null,
			},
			formRules: {
				name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
				content: [{ required: true, message: '请输入自动回复内容', trigger: 'blur' }],
				headUrl: [{ required: true, message: '请上传客服头像', trigger: 'change' }],
				autoStartTime: [{ required: true, message: '请选择自动回复时间', trigger: 'change' }],
			},
			time: [],
		};
	},
	computed: {
		...mapGetters(['kfInfo']),
	},
	created() {
		this.getInfo();
	},
	methods: {
		showDialog() {
			this.show = true;
			this.$nextTick(() => {
				this.$refs.image.syncElUploads([this.kfInfo.headUrl]);
			});
		},
		getInfo() {
			this.$request.get('/mall/message/messageConfig').then((res) => {
				this.$nextTick(() => {
					this.form = res.data;
					this.time = [res.data.autoStartTime, res.data.autoEndTime];
				});
			});
		},
		handleTimeChange(val) {
			this.form.autoStartTime = val[0];
			this.form.autoEndTime = val[1];
		},
		handleSubmit() {
			this.$refs.form.validate((bool) => {
				if (bool) {
					this.$request.post('/mall/message/updateMessageConfig', this.form).then((res) => {
						this.msgSuccess('保存成功');
						this.getInfo();
						this.$store.dispatch('GetKfInfo', false);
						this.handleClose();
					});
				}
			});
		},
		handleClose() {
			this.$refs.form.resetFields();
			this.form.autoStartTime = null;
			this.form.autoEndTime = null;
			this.time = [];
			this.show = false;
		},
	},
};
</script>

<style scoped lang="scss">
.config {
	border-bottom: 1px solid #f2f2f2;
}
</style>
